<template>
  <div id="addFriend">
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">添加</div>
      </div>
      <div class="center">
        <div class="info">
          <div>{{name}}</div>
          <div>{{phone}}</div>
        </div>
        <div class="check">
          <div class="img">
            <div style="display:flex;flex-direction: column;
    align-items: center;">
              <div class="imgBg" style="width:60px;height:60px">
                  <img :src="relativesImg"  alt="" width="60" height="60">
              </div>
              <div>
                <span style="color:rgba(242, 150, 0, 1)">亲友</span><br><br>
                <span v-if="isRelative">已是亲友关系</span>
                
              </div>
            </div>
            <div style="display:flex;flex-direction: column;
    align-items: center;">
               <div class="imgBg bg_r" style="width:60px;height:60px"> 
                <img :src="friendsImg"  alt="" width="60" height="60">
              </div>
              <div>
                <span style="color:rgba(242, 150, 0, 1)">好友</span><br><br>
                <span v-if="isRelative == 0">已是好友关系</span>
                
              </div>
            </div>
           
          </div>
        </div>
      </div>
     
    
      




  </div>
</template>

<script>
import {mapState} from "vuex";
import { friendList, saveByQRCode }  from '@/api/my'
export default {
    data(){
        return{
            back: require("@/assets/my/back.png"),
            relativesImg: require("@/assets/my/friend.png"),
            friendsImg: require("@/assets/my/user.png"),
            relationType:0,
            relation:'',
            friendOptions:[],
            activeIndex:null,
            isfriend:false,
            phone:'',
            name:'',
            userInfo:{},
            userId:'',
            isRelative:'',
            // isFriend:''
        }
    },
    computed: {
    ...mapState(['userInfo']),
  },
    created(){
      this.name = !this.getParam("name") ? "" : decodeURIComponent(this.getParam("name"))
      this.phone = !this.getParam("phone") ? "" : decodeURIComponent(this.getParam("phone"))
      this.userId = !this.getParam("userId") ? "" : this.getParam("userId")
      this.isRelative = !this.getParam("isRelative") ? "" : this.getParam("isRelative")
      // this.isFriend = !this.getParam("isFriend") ? "" : this.getParam("isFriend")
      this.getFriendLabel()
    },
    methods:{
       getParam(name) {
            if (window.location.hash.indexOf("?") != -1) {
                    const query = window.location.hash.split("?")[1];
                    const vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == name) {
                        return pair[1];
                    }
                    }
                } else {
                    return "";
            }

        },
        handleBack(){
            this.$router.go(-2)
        },
        handleSelect(item,index){
          this.relation =  item.label
          this.activeIndex = index
        },
        getFriendLabel(){
            friendList().then((response) => {
              const { data } = response;
              console.log(data)
              this.friendOptions = data
            })
        },
        handleChange(){
          
          if (this.relationType == 1) {
            this.isfriend = true
            this.relation = ''
          }else{
             this.isfriend = false
          }
        },
        handleAdd(){
          if (String(this.relationType) == 0) {
            if (this.relation) {
              // this.$toast(this.relation)
              this.saveFriend()
              
            }else{
              this.$toast('亲友关系不能为空')
            }
          }else{
            // this.$toast('添加为朋友')
            this.saveFriend()
          }
          
        },
        saveFriend(){
          const data = {
            friendLabel:this.relation ,
            friendType:this.relationType,
            id:this.userId,
            userId:this.userInfo.userId


          }
          saveByQRCode(data).then((res) => {
             console.log(res)
             this.handleBack()
          }).catch(()=>{

          })
        }
        
    }

}
</script>

<style lang="less" scoped>
#addFriend{
    min-height: 100vh;
    padding: 0px 15px;
    text-align: center;
    
    .nav {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      .title{
        font-size: 20px;
        font-weight: 500;
      }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
   
    }
    // .content{
      
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: space-evenly;
    //     align-items: center;
    //     height: calc(100vh - 50px);
    .info{
        margin: 30px auto;
        font-size: 30px;
        font-weight: 500;
      div{
          padding: 5px;
      }
    }
    .check{
      display: flex;
      flex-direction: column;
      width: 80%;
      margin: 40px auto;
    }
    .van-field__label {
      font-size: 17px;
    }
    .img{
      display: flex;
      justify-content: space-around;
      .imgBg{
        background:  rgba(242, 150, 0, 1);
        border-radius: 50%;
        padding: 10px;
        
      }
      .bg_r{
        background:  rgba(153, 94, 0, 1);
        border-radius: 50%;
          
      }
    }
    /deep/.van-field__label {
        font-size: 17px;
    }
    /deep/.van-field__control {
        font-size: 17px;
    }
    .center{
   
      // display: flex;
      // align-items: center;
      // justify-content: center;
    }
   
   
   
       
  
}
</style>